<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <!--
   /*
    * MyFonts Webfont Build ID 796864, 2011-05-04T15:31:31-0400
    *
    * The fonts listed in this notice are subject to the End User License
    * Agreement(s) entered into by the website owner. All other parties are
    * explicitly restricted from using the Licensed Webfonts(s).
    *
    * You may obtain a valid license at the URLs below.
    *
    * Webfont: Futura Medium
    * URL: http://new.myfonts.com/fonts/bitstream/futura/medium/
    * Foundry: Bitstream
    * Copyright: Copyright 1990-1999 as an unpublished work by Bitstream Inc.  All rights reserved.  Confidential.
    * License: http://www.myfonts.com/viewlicense?1056
    * Licensed pageviews: unlimited/month
    * CSS font-family: FuturaBT-Medium
    * CSS font-weight: normal
    *
    * Webfont: Futura Medium Italic
    * URL: http://new.myfonts.com/fonts/bitstream/futura/medium-italic/
    * Foundry: Bitstream
    * Copyright: Copyright 1990-1999 as an unpublished work by Bitstream Inc.  All rights reserved.  Confidential.
    * License: http://www.myfonts.com/viewlicense?1056
    * Licensed pageviews: unlimited/month
    * CSS font-family: FuturaBT-MediumItalic
    * CSS font-weight: normal
    *
    * Webfont: Futura Bold
    * URL: http://new.myfonts.com/fonts/bitstream/futura/bold/
    * Foundry: Bitstream
    * Copyright: Copyright 1990-1999 as an unpublished work by Bitstream Inc.  All rights reserved.  Confidential.
    * License: http://www.myfonts.com/viewlicense?1056
    * Licensed pageviews: unlimited/month
    * CSS font-family: FuturaBT-Bold
    * CSS font-weight: normal
    *
    * Webfont: Futura Bold Italic
    * URL: http://new.myfonts.com/fonts/bitstream/futura/bold-italic/
    * Foundry: Bitstream
    * Copyright: Copyright 1990-1999 as an unpublished work by Bitstream Inc.  All rights reserved.  Confidential.
    * License: http://www.myfonts.com/viewlicense?1056
    * Licensed pageviews: unlimited/month
    * CSS font-family: FuturaBT-BoldItalic
    * CSS font-weight: normal
    *
    * (c) 2011 Bitstream Inc
   */

   -->

  <title>ROME | Tech</title>
	<meta property="og:title" content="ROME &ldquo;3 Dreams of Black&rdquo;"/>
	<meta property="og:type" content="interactive film"/>
	<meta property="og:url" content="http://www.ro.me/"/>
	<meta property="og:image" content="http://www.ro.me/files/share.jpg"/>
	<meta property="og:site_name" content="ROME &ldquo;3 Dreams of Black&rdquo;"/>
	<meta property="og:description" content="Check out &ldquo;3 Dreams of Black&rdquo; &mdash; a new an interactive film by Chris Milk. With music from the album &ldquo;Rome&rdquo; by Danger Mouse, Daniele Luppi, featuring Jack White &amp; Norah Jones." />
<link rel="image_src" type="image/jpeg" href="http://www.ro.me/files/share.jpg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script type="text/javascript" src="/asset_viewer/gui-dat/gui.js"></script>
  <script type="text/javascript"
          src="/asset_viewer/gui-dat/controllers/slider.js"></script>
  <script type="text/javascript"
          src="/asset_viewer/gui-dat/controllers/controller.js"></script>
  <script type="text/javascript"
          src="/asset_viewer/gui-dat/controllers/controller.boolean.js"></script>
  <script type="text/javascript"
          src="/asset_viewer/gui-dat/controllers/controller.function.js"></script>
  <script type="text/javascript"
          src="/asset_viewer/gui-dat/controllers/controller.number.js"></script>
  <script type="text/javascript"
          src="/asset_viewer/gui-dat/controllers/controller.string.js"></script>

  <script type="text/javascript" src="/js/lib/Three.js"></script>
  <script type="text/javascript"
          src="/asset_viewer/js/lib/AnimalRandom.js"></script>
  <script type="text/javascript" src="/asset_viewer/js/lib/Trigger.js"></script>
  <script type="text/javascript" src="/js/lib/Stats.js"></script>
  <script type="text/javascript"
          src="/js/lib/RequestAnimationFrame.js"></script>

  <script type="text/javascript"
          src="/asset_viewer/js/shaders/depthShader.js"></script>
  <script type="text/javascript"
          src="/asset_viewer/js/shaders/animalShader.js"></script>
  <script type="text/javascript"
          src="/asset_viewer/js/shaders/triggerShader.js"></script>
  <script type="text/javascript"
          src="/asset_viewer/js/shaders/lightmapShader.js"></script>

  <script type="text/javascript" src="/asset_viewer/js/initScene.js"></script>
  <script type="text/javascript" src="/asset_viewer/js/initGui.js"></script>
  <script type="text/javascript" src="/asset_viewer/js/initModels.js"></script>
  <script type="text/javascript" src="/asset_viewer/js/animation.js"></script>
  <script type="text/javascript" src="/asset_viewer/js/rendering.js"></script>
  <script type="text/javascript" src="/asset_viewer/js/initShaders.js"></script>

  <link rel="stylesheet" href="/asset_viewer/style.css">
  <link rel="stylesheet" href="/asset_viewer/gui-dat/gui.css">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="/files/futura.css">
</head>

<body>

<div id="container">

<div id="behind-the-curtain">

  <header>
    <img src="images/header.png" alt="Rome: 3 Dreams of Black. The Technology"/>
  </header>

<iframe id="curtain" width="804" height="487" src="http://www.youtube.com/embed/ReH7zzj5GPc?hd=1" frameborder="0" allowfullscreen></iframe>


  <h2>Take a look behind the curtain</h2>

  <p>"3 Dreams of Black" is an interactive film by Chris Milk and some friends
    at Google that showcases the creative potential of WebGL. WebGL is a context
    of the HTML5 canvas element that enables hardware-accelerated 3D graphics in
    the web browser without a plug-in. In other words, it enables your browser
    to show some really beautiful visuals. On this page, you'll find a WebGL
    model viewer featuring several of the "3 Dreams of Black" creatures. You'll
    also find 8 demos created by our development team, a link to the code base,
    and some links to resources on the web that will be useful for getting
    started in WebGL programming.</p>

</div>

<hr/>

<h1>Model Viewer</h1>

<div id="model-viewer" class="content">
  <div id="canvasHolder"></div>
  <div id="viewerModelsWrapper">
    <div id="viewerModelsStrip">
      <div id="viewerModels"></div>
    </div>
  </div>
  <div id="viewerSettings"></div>
  <div class="clear"></div>
</div>

<h1>WebGL Examples</h1>

<figure class="example">
  <a href="/tech/hatching-glow-shader">
    <img src="thumbs/1.png"
         class="example-thumb content">

    <h2>Hatching Glow Shader</h2>
  </a>
  <figcaption>
    A demo that applies a crosshatching effect to a 3D model in real time using
    <em>GLSL</em>, or <a href="http://en.wikipedia.org/wiki/GLSL"><em>OpenGL
    Shading Language</em></a>.
  </figcaption>
</figure>

<figure class="example">
  <a href="/tech/normal-mapping">
    <img src="thumbs/2.png"
         class="example-thumb content">

    <h2>Normal Mapping</h2>
  </a>
  <figcaption>
    <a href="http://en.wikipedia.org/wiki/Normal_mapping">Normal mapping</a> can
    be used to simulate the lighting of finely textured surfaces.
  </figcaption>
</figure>

<figure class="example">
  <a href="/tech/video-shader">
    <img src="thumbs/3.png"
         class="example-thumb content">

    <h2>Video Shader</h2>
  </a>
  <figcaption>
    This demo uses GLSL to read frames from <a href="http://en.wikipedia.org/wiki/WebM">WebM</a> videos as textures. The videos are layered to
    create a <a href="http://en.wikipedia.org/wiki/Parallax">parallax</a>
    effect and can be deformed with mouse
    movement.
  </figcaption>
</figure>

<figure class="example fourth">
  <a href="/tech/depth-of-field">
    <img src="thumbs/4.png"
         class="example-thumb content">

    <h2>Depth of Field</h2>
  </a>
  <figcaption>
    This shader simulates <a href="http://en.wikipedia.org/wiki/Depth_of_field">depth of field</a>, the optical phenomenon
    that makes some objects appear in focus and others blurry.
  </figcaption>
</figure>

<div class="clear"></div>

<figure class="example">
  <a href="/tech/mouse-in-3d-space">
    <img src="thumbs/5.png"
         class="example-thumb content">

    <h2>Mouse in 3D Space</h2>
  </a>
  <figcaption>
    How do you use a two dimensional peripheral like the mouse to interact with
    objects in three dimensional space?
  </figcaption>
</figure>

<figure class="example">
  <a href="/tech/cel-shader">
    <img src="thumbs/6.png"
         class="example-thumb content">

    <h2>Cel Shader</h2>
  </a>
  <figcaption>
    This demo uses GLSL to create a <a href="http://en.wikipedia.org/wiki/Cel-shaded_animation">cel or "toon" shader</a>,
    which allows 3D models to mimic the type of shading used in comic books.
  </figcaption>
</figure>

<figure class="example">
  <a href="/tech/metaball-playground">
    <img src="thumbs/7.png"
         class="example-thumb content">

    <h2>Metaball Playground</h2>
  </a>
  <figcaption>
    Using the <a href="http://en.wikipedia.org/wiki/Marching_cubes">Marching
    Cubes</a> algorithm to create <a href="http://en.wikipedia.org/wiki/Metaballs">metaballs</a>. You can also customize the material
    effects and geometry.
  </figcaption>
</figure>

<figure class="example fourth">
  <a href="/tech/turbulent-point-cloud">
    <img src="thumbs/8.png"
         class="example-thumb content">

    <h2>Turbulent Point Cloud</h2>


  </a>
  <figcaption>
    This demo uses thousands upon thousands of individual particles to
    create a complex geometry.
  </figcaption>
</figure>

<div class="clear"></div>

<hr/>

<div class="half ">

  <h3>Ready to get the entire code base?</h3>

  <p>"3 Dreams of Black" is entirely open source, and the project is hosted on
    Google Code. It's a bit of a mess, so proceed at
    your own risk, but if you poke around enough, you’ll see how we created
    the entire project.</p>

  <a href="http://code.google.com/p/3-dreams-of-black/" id="get-the-code">
    Get the code
  </a>

</div>

<div class="half second">

  <h3>And if that's not enough, check out Three.js&hellip;</h3>

  <p>Three.js is the JavaScript library that provided much of the backbone
    magic in "3 Dreams of Black". There are dozens of demos created with
    Three. Here are few of our favorites for you to explore.</p>

  <dl id="links">
    <dt>
      <a href="https://github.com/mrdoob/three.js/">Three.js</a>
    </dt>
    <dd>
      Three.js is the JavaScript library that provides much of the backbone
      magic in "3 Dreams of Black". There are dozens of demos created with
      Three. In particular, check out the <a
        href="http://mrdoob.github.com/three.js/examples/webgl_materials_shaders_fresnel.html">fresnel
      shader demo</a>, the <a
        href="http://mrdoob.github.com/three.js/examples/webgl_materials_cubemap.html">cube
      mapping
      demo</a>, and the cube mapping <a
        href="http://mrdoob.github.com/three.js/examples/webgl_materials_cubemap_refraction.html">refraction
      demo.</a>
    </dd>
    <dt>
      <a href="http://processingjs.org/reference/articles/RenderingModes">Processing.js</a>
    </dt>
    <dd>
      Processing is a language that enables complex graphics programming without
      having to deal with the underlying graphics system. Processing.JS is a
      JavaScript port of Processing, and is a great way for beginners to learn
      graphics programming for the web, including 3D graphics with WebGL.
    </dd>
    <dt>
      <a href="http://www.chromeexperiments.com/webgl">Chrome Experiments</a>
    </dt>
    <dd>
      Chrome Experiments is an ever-growing gallery of innovative graphical
      experiments for the web browser, including many that use WebGL. Each one
      of them was submitted to the site by developers around the world and
      provide great examples of what's possible with WebGL.
    </dd>
  </dl>


</div>

<div class="clear"></div>

<footer>

  <div id="footer-links">
    <a href="http://www.ro.me/">"3 Dreams of Black" The Film</a>
    <span id="footer-link-pipe">|</span>
    <a href="http://romealbum.com/">Rome The Album</a>
  </div>

  <a href="http://chromeexperiments.com" target="_blank"><img src="images/ce.png"
                                              alt="This is a Chrome Experiment"/></a>
  <a href="http://google.com" target="_blank"><img src="images/goog.png"
                                   alt="Made with some friends from Google"/></a>


</footer>

</div>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-22949694-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
  })();

</script>

</body>
</html>
